<template>
  <div class="mci-message-bar flex-space-between pl-16 pr-16" :class="'is-state-' + type">
    <div class="message-bar-left">
      <i class="message-bar-icon mr-4" :class="iconClassName"></i>
      <slot></slot>
    </div>
    <div class="message-bar-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';

type TMessageType = 'success' | 'error' | 'info' | 'warning' | 'default';

export default defineComponent({
  name: 'MessageBar',
  props: {
    type: {
      type: String as PropType<TMessageType>,
      default: 'default'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  setup(props) {
    const iconClassName = computed(() => {
      const classMap: Record<TMessageType, string> = {
        info: 'mci-icon-tag',
        error: 'mci-icon-error',
        success: 'mci-icon-check',
        warning: 'mci-icon-warning',
        default: 'mci-icon-info'
      };

      return classMap[props.type];
    });
    return {
      iconClassName
    };
  }
});
</script>

<style lang="scss" scoped>
.mci-message-bar {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  transition: all 0.2s;
  width: v-bind(width);

  & + .mci-message-bar {
    margin-top: 8px;
  }
  .message-bar-icon {
    vertical-align: -1px;
  }

  .el-icon-point {
    background: #f29727;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
// 默认
.is-state-default {
  background: var(--color-grey-750);
  color: var(--color-grey-50);
}
// 警告
.is-state-warning {
  background: rgba(255, 206, 72, 0.08);
  color: var(--color-amber-200);

  /* @include light {
    background: rgba(242, 151, 39, 0.16);
    color: rgb(242, 151, 39);
  } */
}
// 普通信息@
.is-state-info {
  background: var(--color-grey-1);
  color: var(--color-grey-5);

  /* @include light {
    background: var(--color-white-8percent);
  } */
}
// 成功
.is-state-success {
  background: rgba(15, 186, 106, 0.08);
  color: var(--color-green);
}
// 错误
.is-state-error {
  background: var(--color-red-1);
  color: var(--color-red-5);

  /* @include light {
    background: #ffeff0;
  } */
}
// 警告
.is-state-primary {
  background: rgba(255, 206, 72, 0.08);
  color: var(--color-amber);
}
</style>
